//符
//修改页

<template>
  <div class="all_infoAmend">
    <div class="bg_infoAmend"><img src="../assets/images/upload_img/andrea-rodriguez-m1tTo-2qTCA-unsplash.jpg" style="height: 1889px" alt=""></div>
    <div class="infoAmend">
      <!-- <h1 class="title_infoAmend">注册</h1>
      <div class="line3"></div> -->
      <!-- 下面是输入区 -->
      <div class="infoAmend_box">
        <div class="avatar">
          <img style="width: 89px; height: 85px" :src="head_img" alt="" />
        </div>
        <!--头像 动态？-->
        <div class="inputBox_info">
          <!-- <div class="emailbox_infoAmend">
            <div class="word_email_infoAmend">邮箱</div>
            <input class="inputEmail" type="text" name="email" />
            <button class="get_code_infoAmend">获取验证码</button>
          </div> -->
           <div class="set_account">
            <div class="word_user">用户名</div>
            <!--还未进行输入框的样式调整-->
            <input class="inputAccount" type="text" name="account" />   <!---->
          </div>
          <div class="set_pwd">
            <div class="word_set_pwd">修改密码</div>
            <input class="inputPwd" type="password" name="password" /><!---->
          </div>
          <div class="makesure_pwd">
            <div class="word_surepwd">确认密码</div>
            <!--判断-->
            <input class="inputPwd" type="password" name="password" /><!---->
          </div>
          <div class="select_sex">
            <div class="sex">您的性别</div>                               <!---->
            <div class="boy">                                          
              男<input                                                       
                type="checkbox"
                name="boy"
                checked="cheecked"
                id="boy_box"
              />
              <label for="boy_box"></label>
            </div>
            <div class="girl">
              女<input type="checkbox" name="girl" id="girl_box" />          <!---->
              <label for="girl_box"></label>
            </div>
          </div>
          <!--地区 -->
          <div class="area_box">
            <div class="word_area">你的地区</div>

              <div class="input_sheng">省&nbsp;
              <input type="text" class="sheng" /></div>                         <!---->
              <div class="input_shi">市&nbsp;
              <input type="text" class="shi" /></div>
            
          </div>
          <div class="info_box">
            <div class="word_info">个人介绍</div>
           <!-- <input class="input_info" type="textarea" name="infomation" placeholder="写下您的个人介绍"> -->            <!---->
          <form action=""> <textarea class="input_info" name="" id="" cols="15" rows="15"  placeholder="写下您的个人介绍"></textarea></form>
          </div>
          <!-- <div class="agree_box">
            <input type="checkbox" id="agree">
            <label for="agree"></label><span class="word_agree">我已阅读并接受copyright声明</span>
          </div> -->
          <router-link to="/loginPwd"><button class="btn_infoAmend">确认修改</button></router-link>
        </div>
      </div>
    </div>
  </div>
  <router-view />
</template>
<script>
export default {
  name: "infoAmend",
  components: "",
  data() {
    return {
      head_img: require("../assets/Personal center-1.png") /**动态？ */,
    };
  },
};
</script>
<style scoped>
input {
    outline: none;
  width: 440px;
  height: 60px;
  background: #ffffff;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.95);
  border-radius: 30px;
  letter-spacing: 1px;
  text-indent: 8px;
  font-size: 18px;
}
.all_infoAmend {
  position: relative;
  /* width: 100%; */
  width: 1920px;
  height: 1170px;
  margin: 44px auto 0;
  /* padding-bottom: 168px; */
}
.bg_infoAmend {
  width: 100%;
  height: 100%; /**高已定死  待定 */
display: flex;
justify-content: center;
background-color: gray;
  overflow: hidden;
  position: relative;

}
.bg_regieter img { 
  filter: blur(4px);
  width: 110%;
  margin-top: -10px;
}
.bg_infoAmend::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  width: 110%;
  height: 100%;
  opacity: 0.3;
  background: #000;
}
.infoAmend {
  position: absolute;
  top: 0px;
  width: 100%;
}
/**暂定头像尺寸 */
.avatar {
  margin: 0 auto 72px;
  width: 223px;
  height: 223px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #21262c;
  border-radius: 111px;
}
.title_infoAmend {
  text-align: center;
  width: 100%;
  height: 59px;
  font-size: 60px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #ffffff;
  line-height: 66px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.64);
}
.line3 {
  overflow: hidden;
  margin: 31px auto 51px;
  width: 1435px;
  height: 6px;
  background: #659274;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.64);
  border-radius: 3px;
}
.emailbox_infoAmend {
  width: 550px;
  margin: 0 746px 0px 620px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.securityCode_infoAmend {
  /* width: 546px; *546 */
  margin: 42px 734px 0 594px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.get_code_infoAmend {
  width: 108px;
  height: 40px;
  margin-left: -196px;
  text-align: center;
  background: #659274;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.64);
  border-radius: 20px;

  font-size: 14px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #ffffff;
  line-height: 41px;
  letter-spacing: 1px;
}
.word_email_infoAmend {
  /* width: 49px; */
  margin-right: -8px;
  font-size: 24px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  letter-spacing: 2px;
  color: #ffffff;
  line-height: 66px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.64);
}
.word_code_infoAmend {
  /* width: 49px; */
  margin-right: 58px;
  font-size: 24px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  letter-spacing: 2px;
  color: #ffffff;
  line-height: 66px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.64);
}
.set_account {
  margin: 42px 734px 0 594px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.word_user {
  margin-right: 58px;
  font-size: 24px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  letter-spacing: 2px;
  color: #ffffff;
  line-height: 66px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.64);
}
.word_set_pwd {
  margin-right: 58px;
  font-size: 24px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  letter-spacing: 2px;
  color: #ffffff;
  line-height: 66px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.64);
}
.set_pwd {
  margin: 42px 734px 0 620px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.word_surepwd {
  margin-right: 58px;
  font-size: 24px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  letter-spacing: 2px;
  color: #ffffff;
  line-height: 66px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.64);
}
.makesure_pwd {
  margin: 42px 734px 0 568px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.select_sex {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 45px 1013px 54px 566px;

  font-size: 25px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #ffffff;
  line-height: 69px;
}
.sex {
  margin-right: 81px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.64);
}
.boy {
  margin-right: 32px;
}
.boy,
.girl {
  position: relative;
  display: flex;
  align-items: center;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.64);
}
#boy_box + label {
  width: 14px;
  height: 14px;
  border: 4px solid #659274;
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  top: 22px;
  left: 34px;
  background: transparent;
}
#boy_box:checked + label {
  background-color: #eee;
}
#boy_box:checked + label::before {
  display: block;
  content: "";
  text-align: center;
  font-size: 16px;
  color: white;
}
#girl_box + label {
  width: 14px;
  height: 14px;
  border: 4px solid #659274;
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  top: 22px;
  left: 34px;
  background: transparent;
}
#girl_box:checked + label {
  background-color: #eee;
}
#girl_box:checked + label::before {
  display: block;
  content: "";
  text-align: center;
  font-size: 16px;
  color: white;
}
/* ????关于复选框的样式修改 */
input[type="checkbox"] {
  width: 26px;
  height: 26px;
  visibility: hidden;
}
/* ------------------------------------ */
.word_area {
/* width: 103px;
height: 23px; */
margin-right: 80px; 
font-size: 24px;
font-family: Microsoft YaHei UI;
font-weight: bold;
color: #FFFFFF;
line-height: 66px;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.64);
}
.area_box {
  margin: 0 814px 37px 576px;
  display: flex;
  align-items: center;
}
.sheng, .shi {
  width: 123px;
height: 60px;
background: #FFFFFF;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.95);
border-radius: 10px;
}
.input_sheng {
  margin-right: 14px;
}
.input_sheng, .input_shi {
  font-size: 24px;
font-family: Microsoft YaHei UI;
font-weight: bold;
color: #FFFFFF;
line-height: 66px;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.64);
}
.info_box {
margin: 0px 736px 62px 576px;
display: flex;
}
.word_info {
/* width: 102px;
height: 24px; */
margin: 16px 62px 0 0;
font-size: 24px;
font-family: Microsoft YaHei UI;
font-weight: bold;
color: #FFFFFF;
line-height: 66px;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.64);
}
/* 文本框内文字未设置好 */
.input_info {
  font-size: 24px;
  flex-wrap: wrap;
  width: 439px;
height: 192px;
background: #FFFFFF;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.95);
border-radius: 30px;
/* line-height: 0px; */
text-indent: 10px;
overflow: hidden;
}
.agree_box {
  position: relative;
display: flex;
/*  justify-content: center; */
margin: 0 859px 0 806px;
cursor: pointer;
}
.word_agree {
  /* width: 216px;
height: 18px; */
font-size: 18px;
font-family: Microsoft YaHei UI;
font-weight: bold;
color: #FFFFFF;
line-height: 66px;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.64);
letter-spacing: 1px;
}
#agree + label {
  width: 14px;
  height: 14px;
  border: 4px solid #659274;
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  top: 22px;
  left: 0px;
  background: transparent;
}
#agree:checked + label {
  background-color: #eee;
}
#agree:checked + label::after {
  display: block;
  content: "";
  text-align: center;
  font-size: 16px;
  color: white;
}
.btn_infoAmend {
  display: block;
  width: 440px;
height: 80px;
background: #659274;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.64);
border-radius: 40px;
margin: 22px 743px 0 737px;
/* 
width: 75px;
height: 36px; */
font-size: 36px;
font-family: Microsoft YaHei UI;
font-weight: bold;
color: #FFFFFF;
line-height: 66px;
}
</style>